<template>
  <div class="banner">
    <div class="video-wrap">
      <video ref="playerRef" preload="auto" controls autoplay muted class="video" ></video>
    </div>
    <!-- 下方文字指示器组 -->
    <!-- <div class="indicators-wrapper" >
        <div v-for="(item, index) in carouselList" :key="index" class="indicator-item" :class="{ 'active': initialIndex === index }">
            <span class="indicator-text">{{ item.text }}</span>
        </div>
    </div> -->
  </div>
</template>
 
<script  setup>
import {flvUrl,flvUrl2} from "../utlis/requests"
import { ref, onMounted, onUnmounted} from "vue"
import flvjs from "flv.js";

const carouselList=ref([
{ id: 1, text: '烘焙车间' },
{ id: 2, text: '面点车间' }
])
const playerRef = ref()
//可打印出当前所触发的事件
const initialIndex = ref(0)
//const url= ref(flvUrl)
const url= ref('http://192.168.10.222:8088/live/HIK001.live.flv')
const timers=ref()
const playTimers=ref()
const flvPlayer =ref(null)

// 监听轮播图改变
onMounted(()=>{
  clearInterval(timers.value);
  initFlvPlayer()
  changePlay()
})

  // 清除定时器
  onUnmounted(() => {
    clearInterval(timers.value);
    destroyFlv()
    clearTimeout(playTimers.value);
  });

 
const changePlay=()=>{
  let len=carouselList.value.length
  timers.value=setInterval(()=>{
    if(initialIndex.value<len-1) {
      initialIndex.value++;
    } else {
      initialIndex.value = 0;
    }

    if(initialIndex.value==0){
      //url.value=flvUrl
      url.value='http://192.168.10.222:8088/live/HIK001.live.flv'
    }else{
      //url.value=flvUrl2
      url.value='http://192.168.10.222:8088/live/HIK002.live.flv'
    }
    initFlvPlayer()
    console.log('flvUrl',url.value)
  },30000)
}  

const initFlvPlayer=()=>{
  if (flvjs.isSupported()) {
    destroyFlv()
    flvPlayer.value = flvjs.createPlayer({
      type: 'flv',
      //url: url.value+'/flv', // 这里填写你的 FLV 视频流 URL
      url: url.value,
      cors: true, // 启用CORS
      headers: {
          'Referer': url.value // 设置Referer头
      }
    }, {
      autoCleanupSourceBuffer: true,
      enableWorker: false, //不启用分离线程
      enableStashBuffer: true, //关闭IO隐藏缓冲区
      isLive: true,
      lazyLoad: false,
      stashInitialSize: 128,// 减少首桢显示等待时长
    });
    flvPlayer.value.attachMediaElement(playerRef.value);
    flvPlayer.value.load(); // 加载视频流


    let playPromise=flvPlayer.value.play();
    if(playPromise!==undefined){
      playPromise.then(_=>{
        //playTimers.value=setTimeout(()=>{
          flvPlayer.value.play();// 开始播放视频流
        //},500)
      }).catch(error=>{
        console.log('error',error)
      })
    }

    flvPlayer.value.on(flvjs.Events.ERROR, function(err, data) {
        console.error('Error:', err, data);
        // 视频出错后销毁重建
        destroyFlv()
        initFlvPlayer()
    });
    
  }else {
    console.error('FLV is not supported in this browser.');
  }
}

const destroyFlv=()=>{
  if (flvPlayer.value) {
      flvPlayer.value.pause();
      flvPlayer.value.unload(); 
      flvPlayer.value.detachMediaElement(); 
      flvPlayer.value.destroy(); 
      flvPlayer.value = null;
    }
}

</script>
 
<style lang="less" scoped>
.banner{
  height:343px;
  width:712px;
  background: url('../components/img/center-container.png') no-repeat;
  background-size: 100% 100%;
  transform: matrix(1, 0, 0, 1, 1, 0);
  transition-duration: 0ms;
  .video-wrap{
    width: 100%;
    height: 100%;
    padding: 1%;
    border-radius: 2%;
    .video{
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }
  // .indicators-wrapper{
  //     height:18%;
  //     width:98%;
  //     margin:0 1% 2%;
  //     display:flex;
  //     background:#0b2545;
  //     color:#fff;
  //     border-bottom-left-radius:10px;
  //     border-bottom-right-radius:10px;
  //     .indicator-item{
  //       flex:1;
  //       height:100%;
  //       display:flex;
  //       align-items:center;
  //       justify-content:center;
  //       background:rgba(0,0,0,0.5);
  //       &.active{
  //           background:#1296db;
  //       }
  //   }
  // }
}



</style>